<template>
	<!-- 订单 -->
	<view>
		<button class="mini-btn" type="warn" size="mini">全部</button>
		<button class="mini-btn" type="warn" size="mini">待核销</button>
		<button class="mini-btn" type="warn" size="mini">已完成</button>
		<button class="mini-btn" type="warn" size="mini">已取消</button>
	</view>
	
	<view v-if="that.visible" class="drawer-container">
			<!-- 点击遮罩关闭抽屉 -->
			<view class="mask-container" :class="{'mask-visible': that.showDrawer}" @tap="close"></view>
			<!-- 内容展示区域 -->
			<view :style="{width}" class="content-container" :class="{'content-visible--right': that.showDrawer}">
				<slot></slot>	
			</view>
		</view>
</template>

<script setup>
	import {
		defineProps,
		ref,
		reactive,
		defineExpose
	} from 'vue'
	
	/**
	 * width:内容区域的宽度
	 */
	const props = defineProps({
		width: {
			type: String,
			default: '310px'
		}
	})
	// 抽屉显隐控制数据
	const that = reactive({
		visible: false,
		showDrawer: false
	})
	let watchTimer = null
	
	// 打开抽屉
	const open = () => {
		if (that.visible) {
			return
		}
		change('visible', 'showDrawer', true)
	}
	// 关闭抽屉
	const close = () => {
		if (!that.visible) {
			return
		}
		change('showDrawer', 'visible', false)
	
	}
	// 抽屉显隐变化
	const change = (param1, param2, status) => {
		// 1、当抽屉关闭时：先控制showDrawer，使动画完成渲染，之后再操作visible关闭抽屉组件
		// 2、当抽屉开启时：先控制visible开启抽屉组件，使抽屉组件渲染，再操作showDrawer，使动画完成渲染
		that[param1] = status
		if (watchTimer) {
			clearTimeout(watchTimer)
		}
		watchTimer = setTimeout(() => {
			that[param2] = status
		}, status ? 50 : 300) // 这里的300是动画过渡时间(transition)；50没有实际意义
	}
	// 暴露关闭、开启方法
	defineExpose({
		open,
		close
	})
</script>

<style lang="scss">
	      .mini-btn{
			  margin-left: 27px;
		  }
		 .drawer-container {
		 		position: fixed;
		 		top: 0rpx;
		 		left: 0rpx;
		 		right: 0rpx;
		 		bottom: 0rpx;
		 		z-index: 999;
		 
		 		.mask-container {
		 			display: block;
		 			position: absolute;
		 			top: 0;
		 			left: 0;
		 			bottom: 0;
		 			right: 0;
		 			opacity: 0;
		 			background-color: rgba(15, 37, 41, 0.72);
		 			transition: opacity 0.3s;
		 		}
		 	
		 		.content-container {
		 			position: absolute;
		 			right: -100%;
		 			top: 0rpx;
		 			bottom: 0rpx;
		 			z-index: 999;
		 			background-color: #ffffff;
		 			transition: right 0.3s ease;
		 		}
		 		.content-visible--right {
		 			right: 0;
		 		}
		 
		 		.mask-visible {
		 			display: block;
		 			opacity: 1;
		 		}
		 	} 
</style>
